<template>
  <div class="imgupload">
    <!-- 上传图片 -->
    <el-upload
      v-if="!imageUrl"
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :http-request="httpRequest"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <!-- 显示默认图片 -->
    <div v-else class="mybox">
      <img :src="imageUrl" class="avatar" @click="openshow" v-imgerror="defaultImg"/>
      <i class="el-icon-close myclose" @click="clearimg"></i>
    </div>
    <!-- 图片上传进度条 -->
    <el-progress v-if="showProgress" :percentage="percentage" :show-text="false" class="myprogress"></el-progress>
    <!-- 图片预览框 -->
    <el-dialog
      title="预览图片"
      :visible.sync="imgshow"
      width="30%"
      class="mydialog"
    >
      <img :src="imageUrl" />
    </el-dialog>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
export default {
  name: "imgUpload",
  props: ["imageUrl"],
  data() {
    return {
      // 当前上传的图片的路径
      //   imageUrl: "",
      // 控制预览框的显示与隐藏
      imgshow: false,
      // COS对象
      cosObj: null,
    //   图片加载进度条的显示
    percentage:0,
    // 控制进度条的显示与隐藏
    showProgress:false,
// 设置一张默认图片
defaultImg:require('@/assets/common/img.jpeg')
    };
  },
  methods: {
     // 自定义上传功能：将图片资源上传到腾讯云中
    httpRequest (content) {
        // 显示进度条
        this.showProgress = true
      // 得到上传的文件
      const file = content.file
      this.cosObj.putObject(
        {
          Bucket: 'hmrzxm-1254316328' /* 必须 */,
          Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
          Key: file.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: file, // 上传文件对象
          onProgress: progressData => {
            // 上传的进度
            // progressData: 上传过程中的实时进度对象
            // console.log(JSON.stringify(progressData))
            // 实时修改进度条的值
            this.percentage=progressData.percent*100
          }
        },
        (err, data) => {
          // 上传之后的回调函数
          // data: 上传成功后的返回值
          // err: 上传出错的错误信息
        setTimeout(()=>{
              // 隐藏进度条
        this.showProgress = false
          // 将返回的图片地址保存起来： imageUrl
          this.$emit('update:imageUrl', `https://${data.Location}`)
        },500);
        }
      )
    },
    //   handleAvatarSuccess(res, file) {
    //     this.imageUrl = URL.createObjectURL(file.raw);
    //   },
    // 上传之前会触发的回调函数
    beforeAvatarUpload(file) {
      //   判断图片的类型
      const isType =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      // 判断图片的大小
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isType) {
        this.$message.error("上传头像图片只能是 JPG、png或者gif格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isType && isLt2M;
    },
    openshow() {
      this.imgshow = true;
    },
    clearimg() {
      this.$emit("update:imageUrl", "");
    },
  },
  created(){
    //   初始化
    this.cosObj = new COS({
        SecretId:'AKIDvhEUTDixwe5F8k59xUlmX1FCrFMDn69w',
        SecretKey:'XnmWzlGUS9ZhZAUYLs99sLYU9XfW6RVI',
    })
  }
};
</script>

<style lang="scss">
.imgupload {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .mydialog {
    text-align: center;
  }
  .mybox {
    display: inline-block;
    border: 1px dashed #ccc;
    position: relative;
    .myclose {
      position: absolute;
      top: 0;
      right: 0;
      width: 20px;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.3);
      line-height: 20px;
      text-align: center;
      color: #fff;
      border-radius: 0 0 0 3px;
      display: none;
    }
    &:hover .myclose {
      display: block;
    }
  }
  .myprogress{
        width: 180px;
    }
}
</style>